<template>
  <div class="album-cover" :style="{width: width + 'px'}">
    <div class="album-img" :style="{width: width + 'px', height: size + 'px'}">
      <img 
        :src="formatImageSize(props.item.picUrl, size)"
        :alt="item.name"
        :style="{width: width + 'px', height: size + 'px'}"
      >
      <a 
        href="javascript:;" 
        class="cover image_cover"
        :style="{backgroundPosition: 0 + bgp}"
      >
      </a>
    </div>

    <div class="album-info">
      <div class="name text-nowrap">{{ props.item.name }}</div>
      <div class="artist text-nowrap">{{ props.item.artist.name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { formatImageSize } from "@/utils/format-utils";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  size: {
    type: Number,
    default: 130
  },
  width: {
    type: Number,
    default: 153
  },
  bgp: {
    type: String,
    default: "-845px"
  }
})

</script>

<style lang="less" scoped>
@import './index.less';
</style>
